<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<head>
  <title>分布式文件系统容量监控</title>
  <style type="text/css">
    .storage{}
  </style>
  <script type="application/javascript" src="${ctx}/assets/admin/LingUI/highcharts/highcharts.js"></script>
  <script type="application/javascript" src="${ctx}/assets/admin/LingUI/highcharts/highcharts-more.js"></script>
</head>

<div class="row">
  <div class="col-xs-12" id="parent">
    <c:forEach items="${groups}" var="groupb"  varStatus="groupstatus">
      <div class="widget-box " style="height:300px;min-height :200px;">
        <div class="widget-header">
          <h4 class="widget-title lighter smaller">组[${groupb.groupName}]</h4>
        </div>
        <div class="widget-body">
          <div class="widget-main padding-8 admin-body">
            <c:forEach items="${groupb.storageList}" var="storage"
                       varStatus="status">
              <div class="storage" style="float: left; margin-right: 5px">
                <input type="hidden" value="${storage.freeMB}" name="freeMB" /> <input
                      type="hidden" value="${storage.totalMB}" name="totalMB" /> <input
                      type="hidden" value="${storage.ipAddr}" name="ip" />
              </div>
            </c:forEach>
          </div>
        </div>
      </div>
    </c:forEach>
  </div>
</div>
<script type="application/javascript">
  var scripts=[null,null];
  ace.load_ajax_scripts(scripts,function(){

  });

  function createChart(id,totalMB,freeMB,name,ip){
    chart = new Highcharts.Chart({
      chart: {
        renderTo: id,
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        height:200,
        width:280,events:{
          click:function(){
            navTab.openTab("toStorageInfo","monitor/storageInfo.shtml?ip="+ip,{title:'容量历史'})
          }
        }
      },
      title: {
        text: name,
        style: {
          fontSize:'13px'
        }
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.point.name +'</b> '+ this.percentage.toFixed(2) +' %';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            formatter: function() {
              return this.percentage.toFixed(2) +' %';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: 'Browser share',
        data: [{
          name: '已使用:'+((totalMB-freeMB)/1024).toFixed(2)+"G",
          y: 1-freeMB/totalMB,
          sliced: true,
          selected: true,
          color:'red'
        },{
          name:'未使用:'+((freeMB)/1024).toFixed(2)+"G",
          y:freeMB/totalMB,
          color:'green'
        }]
      }],
      credits:{
        href:'javascript:void(0)',
        text:'青岛工业软件研究所'
      }
    });
  }

  jQuery(function($){
    $("div.storage").each(function(){
      var toRender=$(this);
      var freeMB = $(this).find('input[name=freeMB]').val();
      var totalMB = $(this).find('input[name=totalMB]').val();
      var ip = $(this).find('input[name=ip]').val();
      var name = 'IP:'+ip+' 容量:'+ (totalMB/1024).toFixed(2)+'G';
      createChart(toRender[0],totalMB,freeMB,name,ip);
    });
  });

</script>